<template>
  <div class="mb-3">
    <el-echarts
      :option="option"
      ref="echarts"
      :height="400"
      :width="width"
      :loading="loading"
      @onInit="onInit"
      v-show="!imgType"
      theme="macarons"
    ></el-echarts>
    <img height="400" class="w-100" v-show="imgType" :src="imgData" alt="" />
  </div>
</template>
<script>
import { echartsXFormatter } from '@vimi/utils-tool'

export default {
  components: {},
  props: {
    addressCode: String,
    categoryCode: String,
    title: String,
    subTitle: String,
    imgType: Boolean,
    unit: { type: String, default: '斤' },
    width: {
      type: [Number, String],
      default: '100%',
    },
  },
  data() {
    return {
      chart: null,
      option: null,
      loading: false,
      imgData: '',
    }
  },
  computed: {
    hasProps() {
      return this.addressCode && this.categoryCode
    },
  },
  watch: {
    addressCode() {
      this.getData()
    },
    categoryCode() {
      this.getData()
    },
  },
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    onInit(chart) {
      this.chart = chart
    },
    getData() {
      if (!this.hasProps) {
        this.setOption()
        return false
      }

      this.loading = true
      this.$http
        .get('/industrial/farm/collect/', {
          params: {
            addressCode: this.addressCode,
            categoryCode: this.categoryCode,
          },
        })
        .then(res => {
          const data = res.data
          this.setOption(data.addressList, data.farmNumList, data.farmScaleList)
        })
        .catch(() => {
          this.$message.error('获取数据失败！')
        })
        .then(() => {
          this.loading = false
        })
    },

    setOption(xData, aData, bData) {
      this.option = {
        backgroundColor: '#eff8fe',
        title: {
          text: this.title || '',
          subtext: this.subTitle || '',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ['农场数量', `规模数量(${this.unit})`],
          top: 20,
        },
        grid: {
          top: 80,
          left: 50,
          right: 50,
        },
        xAxis: [
          {
            type: 'category',
            data: xData || [],
            axisLabel: {
              formatter: v => echartsXFormatter(v, 4),
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '农场数量',
          },
          {
            type: 'value',
            name: `规模数量(${this.unit})`,
          },
        ],
        series: [
          {
            name: '农场数量',
            type: 'bar',
            data: aData || [],
            barMaxWidth: 40,
          },
          {
            name: `规模数量(${this.unit})`,
            type: 'line',
            data: bData || [],
            yAxisIndex: 1,
          },
        ],
      }
      if (this.hasProps && this.chart && this.chart.getDataURL) {
        this.chart.on('finished', () => {
          this.imgData = this.chart.getDataURL()
        })
      }
    },
  },
}
</script>
<style scoped></style>
